<template>
    <!-- 导航栏 -->
    <van-nav-bar title="充值中心" left-text="" left-arrow @click-left="goBack" />
  
    <div role="alert" class="van-notice-bar">
      <i class="van-badge__wrapper van-icon van-icon-warning van-notice-bar__left-icon">
      </i>
      <div role="marquee" class="van-notice-bar__wrap">
        <div class="van-notice-bar__content">公告：未满18岁的未成年人请勿消费</div>
      </div>
    </div>
    <div class="van-cell van-cell--large">
      <i class="van-badge__wrapper van-icon van-icon-gold-coin van-cell__left-icon"></i>
      <div class="van-cell__title">
        <span>账户余额：￥{{ LoginUser.money }}</span>
      </div>
    </div>
    <div class="van-cell van-cell--large">
      <i class="van-badge__wrapper van-icon van-icon-manager van-cell__left-icon"></i>
      <div class="van-cell__title">
        <span>用户：{{ LoginUser.nickname }}</span>
      </div>
    </div>
  
    <van-field
      label="自定义金额"
      v-model="nums"
      readonly
      clickable
      @touchstart.stop="isShow = true"
    />
    <van-number-keyboard
      v-model="nums"
      theme="custom"
      close-button-text="完成"
      :show="isShow"
      :maxlength="6"
      @blur="isShow = false"
      @close="recharge()"
    />
  
    <div
      role="separator"
      class="van-divider van-divider--hairline van-divider--content-center"
    >
      固定金额
    </div>
  
    <van-row justify="space-around"
      style="font-size: 18px; color: #1989fa; text-align: center; margin-bottom: 15px"
    >
      <van-col span="7" v-for="item in amount" :key="item.id" @click="confirm(item.num)">
        <div
          style="
            border: 1px solid #1989fa;
            padding: 5px 0;
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
          "
        >
          <i class="van-badge__wrapper van-icon van-icon-gold-coin-o van-button__icon"></i>
          <span>{{ item.num }}元</span>
        </div>
      </van-col>
    </van-row>
  
    <van-field
      v-model="content"
      rows="2"
      autosize
      label="充值备注"
      type="textarea"
      maxlength="100"
      show-word-limit
    />
  </template>
  <script setup>
  const { cookies } = useCookies();
  const router = useRouter();
  const LoginUser = reactive(cookies.get("LoginUser"));
  const amount = ref([
    {
      id: 1,
      num: 5,
    },
    {
      id: 2,
      num: 10,
    },
    {
      id: 3,
      num: 20,
    },
    {
      id: 4,
      num: 50,
    },
    {
      id: 5,
      num: 100,
    },
    {
      id: 6,
      num: 200,
    }
  ]);
  const isShow = ref(false);
  const point = ref(null);
  const content = ref(null);
  const nums = ref(null);
  const goBack = () => {
    router.push("/business/base/index");
  };
  const confirm = (num) => {
    showConfirmDialog({
      title: `充值${num}元`,
      message: `是否确认确充值${num}元`,
    })
      .then(() => {
        point.value = num;
        recharge();
      })
      .catch(() => {});
  };
  
  const recharge = async () => {
    isShow.value = false;
    let data = {
      money: point.value ? point.value : nums.value,
      busid: LoginUser.id,
      content: content.value,
    };
    let result = await Api.recharge(data);
    if (result.code == 1) {
        showSuccessToast(result.msg)
        router.push("/business/base/index");
    } else {
        showFailToast(result.msg)
    }
  };
  </script>
  <style scoped>
  .van-divider--content-center {
    color: rgb(25, 137, 250);
    border-color: rgb(25, 137, 250);
    padding: 0px 16px;
  }
  </style>